<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 

<title>Document</title>

<style>
#title {
	height: 80px;
}

#title_img { 
	position: relative;
	top: 10px;
}

#title_order {
	position: relative;
	top: 10px;
	font-size: 5px;
}

#title_ul1 {
	list-style-type: none;
	position: relative;
	text-align: right;
}

#title_ul2 {
	list-style-type: none;
	position: relative;
	text-align: right;
}
 
.picture {
	height: 500px;
	border: 1px solid cornflowerblue;
	float: left;
}
  
.massage {  
	height: 500px;
	border: 1px solid rgba(52, 25, 58, 0.377);
	float: left;
}
  
.socket {
	height: 500px;
	border: 1px solid rgba(187, 96, 96, 0.863);
	float: right;
}

#ul_message li {
	float: left;
	padding: 15px 15px 0px 15px
}

.ul_message li {
	float: left;
	padding: 15px 15px 0px 15px
}

#detail div {
	border: 1px solid gray;
}
#table_records td {
    text-align:center;
    
} 
#table_records th {
    text-align:center;
    background-color: rgb(240, 104, 13);
}
#lingxian {
        color:darkred;
}
#cart li {
              float:left;
              margin-top: 5px;
              margin-left: 10px;
              margin-right: 10px;
}

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--异步加载-->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!--axio-->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!--路由-->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>


<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 ,导入vue插件-->




</head>
<body>


	<div class="container">
		<!-- 头条 -->
		<div class="row" id="title">
			<!-- logo -->
			<div class="col-sm-5" id="title_img">
				<img src="images/logo.png" style="height: 90px; width: 300px;">
			</div>
			<!-- 头像 -->
			<div class="col-sm-2" style="text-align: center;">
				<img src="images/head.jpg"
					style="border-radius: 60%; width: 60%; height: 60%; background-repeat: no-repeat; margin-top: 10px;">
			</div>
			<!-- 安全退出 -->
			<div class="col-sm-5" id="title_order" v-if="unlogin">
				<ul id="title_ul1">
					<span><a href="personalCenter.html">首页</a></span>
					<span>|</span>
					<span><a href="cart.html">登录</a></span>
					<span>|</span>
				</ul>
				<ul id="title_ul2">
					<span>{{user}}</span>
					<span>[</span>
					<span>
                       
                        <a href="#" style="color: orange" onclick="logout()">注册</a></span>
					<span>]</span>
				</ul>
			</div>
			 <div class="col-sm-5" id="title_order" v-if="login">
			         <input type="hidden" v-model="login">
			          <input type="hidden" v-model="unlogin">
				<ul id="title_ul1">
					<span><a href="index.html">首页</a></span>
					<span>|</span>
					<span><a href="logout()">退出</a></span>
					<span>|</span>

				</ul>
				<ul id="title_ul2">
				<input type="hidden" v-model="user">
					<span>您好,<span id="account1"></span>,欢迎您来拍卖!{{user}}
					</span>
					<span>[</span>
					<span><a href="personalCenter.html" style="color: orange" onclick="">个人中心</a></span>
					<span>]</span>
				</ul>
            </div>
    




		</div>
		<!-- 分割线 -->
		<div class="row">
			<div class="col-sm-12" id="title_img" style="height: 40px;">
				<img src="images/line.png" style="width: 100%; height: 40px;">
			</div>
		</div>

	</div>

 
<!--查询部分    -->
	<div class="container-fluid"
		style="background-color: gray; height: 35px; margin-top: 15px;">
		<div class="row" style="height: 100%;">
			<div class="col-sm-1"></div>
			<div class="col-sm-10">
				 <ul id="cart" style="list-style-type: none;float: left;" >
				 <li><a>生活用品</a></li>
                 <li><a>手机电脑</a></li>
                 <li> <a>运动健身</a></li>
				 <li><a>金银首饰</a></li>
				 <li><a>漫画周边</a></li>
				 <li><a>乐器专辑</a></li>
				 <li><a>游戏玩具</a></li>
				 <li><a其他a></li>
				 </ul>
                <div class="row" style="float: right; width: 25%; height: 80%;">搜索
                  <input type="text" style="width:200px ;"> 
                </div>
			</div>
			<div class="col-sm-1"></div>
		</div>


	</div>








            <!--商品展示-->
	<div id="good_detail" class="container"
		style="margin-top: 5px; padding: 0px;">
		<!--拍卖详情展示-->

		<div class="detail_show" style="height: 500px; border: 1px solid green;">

			<div id="auction_picture" class="col-sm-4 picture">

				<div  class="row"
					style="height: 5%; text-align: center; border: 1px solid slategrey;"></div>

				<div id="auction_picture1" class="row" style="height: 70%;">
					<div style="margin: 10px; height: 100%; width: 100%;">
                         <img class="image" height="90%" width="100%" src="" alt="">
					</div>
				</div>
				<div id="auction_pictures" class="row" style="height: 20%;">
					<div style="width: 20%; margin-top: 10px;">
						<img class="image" height="90%" width="100%" src="" alt="">
					</div>
					<div style="width: 20%; margin-top: 10px">
						<img class="image" height="90%" width="100%" src="" alt="">
					</div>
					<div style="width: 20%; margin-top: 10px">
						<img class="image" height="90%" width="100%" src="" alt="">
					</div>
					<div style="width: 20%; margin-top: 10px">
						<img class="image" height="90%" width="100%" src="" alt="">
					</div>
					<div style="width: 20%; margin-top: 10px">
						<img class="image" height="90%" width="100%" src="" alt="">
					</div>


				</div>
			</div>




 
                     <!--商品中间部分  -->
			<div class="col-sm-5 massage" id="message">

				<!--拍卖名-->
				<div id="auction_name" class="row"
					style="margin-top: 30px; height: 10%; text-align: center; border: 1px solid slategrey;">


					<div class="col-sm-10">
					<input type="hidden"  v-model="goodname" value="goodname" >
						拍卖品:
						<p style="margin: 0px;" >{{goodname}}</p>
					</div>
					<div class="col-sm-2">
						<button  id="collect" onclick="collect()" class="btn-info" style="height: 70%; float: right;">收藏</button>
					</div>

				</div>
                   
                <!--拍卖详情不包含图片部分-->
				<div id="product_show" class="row" style="height: 60%; border: 1px solid yellow;">
                          <input type="hidden" v-model="starting_price" >
                          <input type="hidden" v-model="deposit" >
                          <input type="hidden" v-model="unopen"   v-model="open" >
                          <input  type="hidden"  v-model="time"  v-model="over" v-model="bidding_status"   >


					<!--当未开拍时是显示这个-->
			<div class="col-sm-12" v-if="unopen"
                        style="background-color: lightgray;">
              	<!--会乱格式,会变得格式
                    拍卖显示时间
                  -->
                <div class="row" style="height: 20%;">
                    
					      <div class="col-sm-12"
					            style="background-color: white; padding: 0px;">
					     	<p style="background-color: FireBrick; width: 70px; float: left; color: whitesmoke;">{{bidding_status}}</p>                    
							<label style="margin: 0px; " >{{over}}:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label style="font-size: 30px;color: darkred;">{{time}}</label></label>
                           
                       
				   	</div>	
				</div>

						<div class="row" style="height: 30%; width: 100%;">
							<div class="col-sm-12">
								<p style="padding-left: 20%; width: 90%; margin: 0px;">
									  拍卖起价：&nbsp;&nbsp;&nbsp;&nbsp; 
									   <label 
										style="font-size: 50px; color: darkred;">{{starting_price}} 
										</label>
										<label 
										style="height: 10px; color: brown; font-size: 10px;">（{{times}}出价次数）
										</label>		
								</p>
							</div>
                        </div>
                        
						<div
						 class="row" style="height: 30%;">
							<span style="padding-top: 0px; padding-left: 20%;">&nbsp;&nbsp;保证金：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
								style="font-size: 40px; color: red;">&nbsp;&nbsp;{{deposit}}</span>
							</span>
						</div>
						<div style="height: 25%; width: 100%; padding-left: 20%;"
							class="row">
							<button id="addSign" onclick="addSign()"  id="sign1" type="button" class="btn layui-btn-danger"style="width: 70%; height: 60%;">预约提交保证金</button>
						</div>
			</div>



			
					<!--登录开拍时是显示的类容-->
                     <div class="col-sm-12"  v-if="open" style="background-color: WhiteSmoke ;">
                        <!--会乱格式,会变得格式
                    拍卖显示时间
                  -->
                <div class="row" style="height: 20%;">
                    
                    <div class="col-sm-12"
                          style="background-color: white; padding: 0px;">
                       <p style="background-color: FireBrick; width: 70px; float: left; color: whitesmoke;">{{bidding_status2}}</p>   
                       <input type="hidden" v-model="time2">                 
                      <label style="margin: 0px; " >{{over}}:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label style="font-size: 30px;color: darkred;">{{time2}}</label></label>
                 </div>	
                </div>

            <div class="row" style="height: 25%;">
            <span style="position: relative; left: 40px;font-size: 20px;color: brown; margin-top: 10px;"> 出价</span>
            <input  id="addPrice" type="text" v-model="current_price" value="current_price" style="position: relative; left: 25%;" disabled="true">       
                <button  id="sign2" onclick="addSign()" class="btn-primary" style="height: 50px;width: 50px;z-index: 100; position: relative;left: 40%;" >报名</button>
            </div>

           <div  class="row" style="height:30px ;"><button id="add" onclick="addPrice()" class="btn-dark" style=" width: 100px;z-index: 100;position: relative; left: 40%;">+</button></div>

            <div style=" margin-top: 20px;  height: 20%; width: 50%;position: relative;left: 100px;" class="row" >
                <button id="confirmPrice"  onclick="confirmPrice()" type="button" class="layui-btn-disabled" style="width: 100%; position: relative;left: 15%;background-color:FireBrick ;color: whitesmoke;">出价</button>
            </div>
                      </div> 


	    </div>

 
                <div id="auction_detail" class="row" style="height: 24%; border:  1px solid red;">
                    <input type="hidden"  v-model="heat"  v-model="starting_price"
                    v-model="bid_increment"  v-model="deposit"   v-model="commission"  v-model="sign"  v-model="reminder">
					<div class="col-sm-12">
					<div class="col-sm-12">
						<div class="row" style="height: 17%;">

							<ul id="ul_message" style="list-style: none; margin: 0px;padding: 0px;">
								<li>{{sign}}人报名</li>
								<li>|</li>
								<li>{{reminder}}人设置提醒</li>
					 			<li>|</li>
								<li>{{heat}}次围观</li>
							</ul>



						</div>
						<div class="row" style="height: 17%;">
							<ul class="ul_message" style="list-style: none; margin: 0px;padding: 0px;">
								<li>起拍价:{{starting_price}}</li>
								<li>|</li>
								<li>加幅价:￥{{bid_increment}}</li>
								<li>|</li>
								<li>保证金:{{deposit}}</li>
							</ul>

						</div>
						<div class="row" style="height: 25%;">
							<ul class="ul_message" style="list-style: none; margin: 0px;padding: 0px;">
								<li>佣金:{{commission}}</li>
								<li>|</li>
								<li>延时周长：无</li>
								<li>|</li>
								<li>保留价：无</li>
							</ul>
						</div>
					</div>

				</div>

			</div>

			
        </div>


        <!--竞价记录部分-->
			<div id="record"  class="col-sm-3 socket" style="background-color: whitesmoke;">
				<div class="row" style="height: 10%;">出价记录:({{record_nums}})</div>
                <div class="row" style=" border: 1px solid rgb(203, 207, 207);">
                    
                    <table >
                         
                        <tr>
                            <td style="width: 100%;text-align:center">状态</td>
                            <td style="width: 100%;text-align:center">竞价人</td>
                            <td style="width: 100%;text-align:center">价格</td>
                        </tr>
                         <div v-if="seen" >
                            <tr v-for="record in records" >
                                <td style="width: 100%;text-align:center">{{record.status}}</td>
                                <td style="width: 100%;text-align:center">{{record.alias}}</td>
                                <td style="width: 100%;text-align:center">{{record.price}}</td>
                            </tr>
                        </div>
                    </table>
                </div>
                <div class="row" style="height: 20px;"><p style="font-family: initial;color: gray;font-size: 20px;">更多记录</p></div>
                
			</div>
           
	 </div>
    </div>
    



         <!--拍品描述部分-->
	<div class="container" style="margin-top: 10px; padding: 0px;">

		<div class="col-sm-9" style="float: left; height: 100%; padding: 0px;">
			<div id="detail" style="height: 50px;">
				<div  onclick="qiehuan (1)"
					style="width: 20%; float: left; height: 100%; text-align: center;">
					拍品描述</div>
				<div  onclick="qiehuan (2)"
					style="width: 20%; float: left; height: 100%; text-align: center;">
					出价记录</div>
				<div  onclick="qiehuan (3)"
					style="width: 20%; float: left; height: 100%; text-align: center;">
					出价记录</div>
				<div  onclick="qiehuan (4)"
					style="width: 20%; float: left; height: 100%; text-align: center;">
					出价记录</div>
				<div  onclick="qiehuan (5)"
					style="width: 20%; float: left; height: 100%; text-align: center;">
					出价记录</div>

			</div>

			<div id="div_1" class="zhuanhuan" style="height: 20%; margin-top: 10px;">

				<p style="background-color: darksalmon;">
					友情提醒：<br>
					1、真伪：送拍机构的企业资质已审核，但拍品介绍（图片、文字、视频等）及拍品资质文件（来源证明、鉴定证书等）均由机构自行发布并上传，所有拍品相关信息由送拍机构自行承担相应担保责任；<br>
					2、售后：拍品多为孤品性质类商品，“7天退货”服务为卖家可选服务保障，不强制送拍机构提供，竞拍前请充分考虑；
                </p>
                <br>
			     <p id="description"  style="font-size: large;color: darkred; font-family: inherit;">
                 </p>
            </div>
            
			<div id="div_2" class="zhuanhuan" style="height: 20%; margin-top: 10px; display: none;">

				<p style="background-color: darksalmon;">
					友情提醒：<br>
					1、真伪：送拍机构的企业资质已审核，但拍品介绍（图片、文字、视频等）及拍品资质文件（来源证明、鉴定证书等）均由机构自行发布并上传，所有拍品相关信息由送拍机构自行承担相应担保责任；<br>
					2、售后：拍品多为孤品性质类商品，“7天退货”服务为卖家可选服务保障，不强制送拍机构提供，竞拍前请充分考虑；
                </p>

                <table id="table_records" border="1px" style="width: 100%;" >   
                    <tr>
                        <th>状态</th>
                        <th>竞价人</th>
                        <th>价格</th>
                    </tr>
                   
                        <tr v-for="record in records">
                            <td v-bind:id="{'lingxian' :record.status=='领先'}"> {{record.status}}</td>
                            <td>{{record.alias}}</td>
                            <td>{{record.price}}</td>
                        </tr>
                  
                </table>
                <center>
                  <button onclick="nextPage()" >下一页</button>    
                    <input id="currentPage" type="text" name="当前页" value="1"> 共多少页 <button onclick="changePage()">确定</button>
                   <button onclick="prePage()">上一页</button>
                  
                           
                </center>
                
    
			</div>
			<div id="div_3" class="zhuanhuan" style="height: 20%; margin-top: 10px; display: none;">

				<p style="background-color: darksalmon;">
					友情提醒：<br>
					1、真伪：送拍机构的企业资质已审核，但拍品介绍（图片、文字、视频等）及拍品资质文件（来源证明、鉴定证书等）均由机构自行发布并上传，所有拍品相关信息由送拍机构自行承担相应担保责任；<br>
					2、售后：拍品多为孤品性质类商品，“7天退货”服务为卖家可选服务保障，不强制送拍机构提供，竞拍前请充分考虑；
				</p>
			</div>


		</div>


		<div class="col-sm-3" style="background-color: whitesmoke; float: right;  border: 1px solid rgba(52, 25, 58, 0.377)">
			<div class="row">
				<p>当前热卖商品</p>
				<p style="position: relative; right: -100px;">换一批</p>
            </div> 

			 <div class="row" id="heatBidding"   style=" margin: 10px; background-color: white;">
                    <div v-for="product in products" style="height: 150px; margin: 5px;">
                    <img style="height:90% ;width: 90%;" v-bind:src="product.picture" >
                      <p style="margin:0px;"></p>
                      <p style="font-size: 10px;margin: 0px;">当前价 <label style="color: darkred;" > {{product.currentPrice}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</label> 拍卖<label > {{product.biddings.length}}</label>次</p>  
                    </div>   
             </div> 
            
        </div>
        


	</div>






	<!--版权部分-->
	<div></div>



	<script>
               //页面顶端部分
               var login =new Vue({
                             el:"#title_order",
                             data: {
                                 unlogin:true,
                                 login:false,
                                 user:"点击这里进行注册",
                                 u_id:""
                                },
                                 mounted (){ 
                         axios.get("/user/findUser").then(res=>{  
                             
                                   console.info(res.data.account+"user")
                                   if(res.data.u_id!=null){
                                    this.unlogin=false;
                                     this.login=true;
                                     alert(res.data.account)
                                   this.user=res.data.account;
                                   this.u_id=res.data.u_id;
                                   }
                                  });

                                 } 
                             
                       })













        //商品id---------------------------------
        parms=getParms();
        var   p_id=parms.p_id;
        var br_id=p_id;
        console.info(p_id)
        var u_id=login.u_id;
		var product = null;
		var timer=null;
        var websocket = null;
		
		//页面加载
		window.onload = function() {


			var xhr = new XMLHttpRequest();
			
			xhr.open("POST", "../product/findProductById?p_id="+p_id, true);

			xhr.onreadystatechange = function() {

				var XMLHttpReq = xhr;
				/**
				 XMLHttpReq.readyState
				 0: 请求未初始化
				 1: 服务器连接已建立
				 2: 请求已接收
				 3: 请求处理中
				 4: 请求已完成，且响应已就绪
				 **/
				if (XMLHttpReq.readyState == 4) {
					if (XMLHttpReq.status == 200) {
						product = XMLHttpReq.responseText;//获取返回值
						product = JSON.parse(product);
						 var p2=document.getElementById("description");
	                       // console.info(product.data.details);
	                        p2.innerHTML=product.data.details;

						var images = document.getElementsByClassName("image");
						for (var i = 0; i < images.length; i++) {

							images[i].src = "./images/" + product.data.picture;
						}

						//发送请求过后 
                                 goodname.goodname=product.data.name; //拍品名
                                                   
                                 price.starting_price="￥"+product.data.starting_price;//起始价
                                 price.deposit="￥"+product.data.deposit;
                                      alert(record.records[0].price)
                                 if(record.records==null){
                                    price.current_price=product.data.starting_price;
                                 }else if(record.records[0].price>product.data.starting_price){
                                    price.current_price=record.records[0].price
                                 }else{
                                    price.current_price=product.data.starting_price;
                                 }
                               
                            

                                 auction_detail.heat=product.data.heat;
                                 auction_detail.starting_price="￥"+product.data.starting_price;
                                 auction_detail.commission="￥"+product.data.commission;
                                 auction_detail.bid_increment=product.data.bid_increment;
                                 auction_detail.deposit="￥"+product.data.deposit;
                                         //查询的拍卖时间
						             var auction_time =product.data.auction_time;
                                     
                        //指定定时器调用
                       // var int=setInterval("clock()",1000);//指定1秒执行一次
                         timer=window.setInterval(function() {clock(product) ;
                        
                        }, 1000); //其中 starttime	
                         

                        //热拍卖部分

 
						
						
					}

				}
			};
			xhr.send();
            console.info(price.open)

            isCollected();//是否收藏过该商品

            


                


		}
		




       













		
		//竞拍商品名字
		var goodname=new Vue({
			el : '#auction_name',          //产品名字
			data : {
				goodname :""

			}
		});
            
                            //竞拍商品展示(拍卖按钮部分)
                        var price= new Vue({     
         							el : '#product_show',
         							data : {
         							      open : false,
         								unopen : true,
         								starting_price : "",//商品起始价
         								deposit: "",//商品加幅度
                                        over : "",
								        time : "",//时间
                                        times : "",//拍卖次数
                                        bidding_status:"将要拍卖",
                                        time2 : "",//正在拍卖时间
                                        bidding_status2:"正在拍卖",
                                        current_price:""

         							},
                                     watch:{
                                        open(newVal,oldVal){
                                                 
                                                 isSigned()//是否预约过
                                            },      
                                       
                                        bidding_status(newVal,oldVal){
                                            
                                                if(newVal=="已结束"){
                                                    if(record.records[0].u_id==u_id)
                                                           { order();}
                                                }
                                            },


                                     }
         						});



                         //竞价商品（文字部分）详情
                                 var auction_detail= new Vue({
							el : '#auction_detail',
							data : {
								heat:"",
                                starting_price:"",
                                commission:"",
                                 deposit:"",
                                bid_increment:"",
                                reminder:"",
                                sign:""
                               
							},
                            mounted(){ 

                                    //Var params =new URLSearchParams()
                                   // alert("pst");
                           axios.get("/bidding/findSignerAndReminder?p_id="+p_id).then(res=>{  
                             //console.info(res);
                                this.reminder=res.data.data[1];
                                 this.sign=res.data.data[0];
                                       });
                                    
                            } 
							
							
						});


                          //竞价记录   页面右上角----------------------------------------------------------
                         var record=new Vue ({
                                  el:"#record",
                                  data:{
                                       records:[],
                                       seen:true,
                                       record_nums:""
                                  },
                                  mounted(){ 
                                         //Var params =new URLSearchParams()
                                       
                             axios.get("/bidding/findAllRecords?p_id="+p_id).then(res=>{ 
                              console.info(res.data.data);
                        	   var bidding=res.data.data;
                               var length=bidding.length;
                               var array=new Array();
                               if(length>=4){
                                length=4;
                               }
                                           for(var i=0;i<length;i++){
                                        	   if(i==0){
                                        		   bidding[i].status="领先"
                                                   array[i]=bidding[i];
                                        		   continue;
                                        	   }
                                        	   bidding[i].status="出局"
                                               array[i]=bidding[i];  
                                           }
                                           console.info(array)
                                                this.records=array;
                                                this.record_nums=res.data.data.length;
                                                 price.times=res.data.data.length;
                                                
                                                
                                              
                                              
                                       }) .catch(function (error) { // 请求失败处理
                                       // console.log(error);
      });
                            } 

                        });



                    //当前正在拍卖的商品VUE
                       var heat= new Vue({
                                el:"#heatBidding",
                                data:{
                                    products:""

                                },
                                mounted() {
                                    axios.get("/product/findHeatBidding").then(res=>{
                                        //console.info(res);
                                        var data=res.data.data;
                                        for(var i=0;i<data.length;i++){
                                                     data[i].picture="./images/"+data[i].picture
                                        }
                                        this.products=data;
                                        console.info(this.products)

                                       
                                       
                                        
                                    })
                               }
                        });
                       
                       //竞价记录（分页部分的）  VUE
                        var records_page=new Vue({
                                el:"#div_2",
                                data:{  
                                    
                                        records:[],
                                    
                                },             
                            mounted(){ 
                                         //Var params =new URLSearchParams()           
                           axios.get("/bidding/findRecords?p_id="+p_id+"&pageNum=1").then(res=>{ 
                              
                        	    var bidding=res.data.data.list;
                                           for(var i=0;i<bidding.length;i++){
                                        	   if(i==0){
                                        		   bidding[i].status="领先"
                                        		   continue;
                                        	   }
                                        	   bidding[i].status="出局";
                                        	   
                                           }
                                           records_page.records=res.data.data.list;
                                                console.info(records_page.records)
                                       
                                       }) .catch(function (error) { // 请求失败处理
                                       // console.log(error);
                                                  });
                            } 
                        })









 

    //返回日期类型的时间差
        function diffTime(startDate,endDate) { 
          
    startDate= new Date(startDate);
    endDate = new Date(endDate);
    var diff=endDate.getTime() - startDate.getTime();//时间差的毫秒数 
   
    //计算出相差天数 
    var days=Math.floor(diff/(24*3600*1000)); 
        
    //计算出小时数 
    var leave1=diff%(24*3600*1000);    //计算天数后剩余的毫秒数 
    var hours=Math.floor(leave1/(3600*1000)); 
    //计算相差分钟数 
    var leave2=leave1%(3600*1000);        //计算小时数后剩余的毫秒数 
    var minutes=Math.floor(leave2/(60*1000)); 
        
    //计算相差秒数 
    var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数 
    var seconds=Math.round(leave3/1000); 
       
    var returnStr = seconds + "秒"; 
    if(minutes>0) { 
        returnStr = minutes + "分" + returnStr; 
    } 
    if(hours>0) { 
        returnStr = hours + "小时" + returnStr; 
    } 
    if(days>0) { 
        returnStr = days + "天" + returnStr; 
    } 
    return returnStr; 
} 




       //查看拍卖还有剩余时间吗
     function  hasRestTime (startDate,endDate){
         //获取当前时间
        var currentTime = startDate;

                   //自定义时间
               var customTime=endDate ; 
            //customTime= customTime.replace("-","/");//替换字符，变成标准格式  
             //customTime= new Date(Date.parse(customTime));
             customTime= new Date(customTime);

                  if(currentTime < customTime){
	                
                    return true;
                    }
              return false;
     }

     




                  // 定时器，设置拍卖商品的剩余开拍时间
                        function clock(product){
                        var date=new Date();//当前时.间
                        var date2=product.data.auction_time;//查出来的时间
                        var bidding_restTime=null;
                        
						  if(hasRestTime(date,date2)){  //如果还未开拍
                            bidding_restTime= diffTime(date,date2);
                            price.time=bidding_restTime;
                            price.over="距开始";
                            
                         }else{ //当前时间超过了开拍时间
                            date2=new Date(date2)
                           
                            overDate=date2.setHours(date2.getHours()+1)//开拍时间加1小时
                            if(hasRestTime(date,overDate)){//如果正在开拍
                                price.unopen=false;
                                price.open=true;
                                console.info("如果正在开拍--------"+ price.open)
                               bidding_restTime=diffTime(date,overDate);
                               price.time2=bidding_restTime;//拍卖进行时间
                               price.over="距结束还有：";
                            }else {
                                price.unopen=true;
                                price.open=false;
                                price.bidding_status="已结束"
                                document.getElementById("addSign").innerHTML="拍卖结束了";
                                document.getElementById("addSign").disabled="disabled";  
                                price.over="已结束";
                                if(record.records[0].u_id!=u_id)
                                {                       
                                price.time="拍卖已结束";
                                }
                                clearInterval(timer);
                                if(record.records[0].u_id==u_id){ 
                                price.time="您已拍下该商品";
                                order();}
                               
                            }
                            
                         }
                    }



              //商品描述栏与竞价记录栏等div的切换操作
                function qiehuan (n){
                    var zhuanhuan= document.getElementsByClassName("zhuanhuan");
                    for( var i=0;i<zhuanhuan.length;i++){
                    	        
                                 zhuanhuan[i].style.display="none";
                    }
                    document.getElementById("div_"+n).style.display="";

                }


              
             //竞价记录的输入页数跳转
                function page(p_id,pageNum){
                    alert(pageNum)
                    axios.get("/bidding/findRecords?p_id="+p_id+"&pageNum="+pageNum).then(res=>{ 
                              
                              var bidding=res.data.data.list;
                                         for(var i=0;i<bidding.length;i++){
                                             bidding[i].status="出局";
                                         }
                                         records_page.records=res.data.data.list;
                                              console.info(records_page.records)
                                     
                                     }) .catch(function (error) { // 请求失败处理
                                     // console.log(error);
                                                });
                                                document.getElementById("currentPage").value=pageNum;

                }
              
                //竞价记录的上一页
                function  prePage(){
                 
                   //竞价记录的 获取当前页数+1
              var pageNum=document.getElementById("currentPage").value;
                   //+1
                            page(p_id,--pageNum);


                }
                 //竞价记录的下一页
                 function  nextPage(){
                  

            // 竞价记录的获取当前页数+1
            var pageNum=document.getElementById("currentPage").value;
             //+1
            page(p_id,++pageNum);
}
            //竞价记录的跳转页面
            function changePage(){
                var pageNum=document.getElementById("currentPage").value;
                page(p_id,pageNum)
            }

            //收藏商品
            function collect(){
                axios.get("/bidding/addCollection?p_id="+p_id+"&u_id="+u_id).then(res=>{ 
                         
                    if(res.data.message=="success"){//收藏成功
                           document.getElementById("collect").innerText="已收藏";
                           document.getElementById("collect").style.color="black";
                         
                            
                        }else if(res.data.message=="error"){
                              //收藏失败
                        }
      
                        });
                }
            












                //页面的加价操作，改变页面的数值
         function addPrice(){
            price.current_price=price.current_price+auction_detail.bid_increment;
         }
         //提交价格，确认价格
         function confirmPrice(){
            var json={"u_id":u_id,"operation":"bidding","price":price.current_price}

           if( websocket==null){  alert("空") ;return}
          
           if(websocket.readyState==1){
            var messageJson = JSON.stringify(json);
           websocket.send(messageJson);
          }
        
          
            var params =new URLSearchParams();   //  隐藏的请求参数对象
            params.append("br_id",br_id);
            params.append("u_id",u_id);
            params.append("price",price.current_price);
            axios.post("bidding/addBidding",params).then(res=>{       //post、put、delete请求这应该这样用
                   if( res.data.message=="success"){
                                     
                   }
                   else if(res.data.message=="error"){
                               alert("系统繁忙");
                   }
         })}




         //报名操作
         function addSign() {
            var params =new URLSearchParams();   //  隐藏的请求参数对象
            params.append("br_id",br_id);
            params.append("u_id",u_id);
            params.append("p_id",p_id);
            axios.post("bidding/addSigner",params).then(res=>{       //post、put、delete请求这应该这样用

                if( res.data.message=="success"){//报名成功了
                    websocket=getSocket();
            if(price.open==true){//正在拍卖
                document.getElementById("sign2").innerHTML ="已预约";//正在拍买时的报名按钮值
                document.getElementById("sign2").disabled="disabled";
                document.getElementById("confirmPrice").innerHTML ="出价";//拍卖时的确定出价按钮值
                document.getElementById("confirmPrice").disabled=""//可以点
                document.getElementById("add").disabled="";
            }

                 if(price.unopen==true){ //如果拍品未开始拍卖时
                 document.getElementById("sign1").innerHTML ="已预约未开拍";//为拍卖的报名按钮值
                 document.getElementById("sign1").style.color="gray";
                 document.getElementById("sign1").disabled="disabled";//不能点，（取消预约）
                 }
            }else if( res.data.message=="error"){//报名失败时
            
            if(price.open==true){//正在拍卖
                document.getElementById("sign2").innerHTML="点击预约";//正在拍买时名按钮值
                document.getElementById("confirmPrice").innerText="请先预约";//拍卖时的确定出价按钮值
                document.getElementById("confirmPrice").disabled="disabled";
                document.getElementById("confirmPrice").style.color="gray";
                document.getElementById("add").disabled="disabled";//加价按钮显示不可点击
                document.getElementById("add").style.color="gray";
            }else if(price.unopen==true){//如果拍品未开始拍卖时
                document.getElementById("sign1").innerText="点击预约提交保证金";
            }
            }


                  });
         }
















          
         



         //查询该用户是否收藏了该产品
         function isCollected(){

            var params =new URLSearchParams();   //  隐藏的请求参数对象
          
            params.append("p_id",p_id);
            
            axios.post("product/isCollected",params).then(res=>{       //post、put、delete请求这应该这样用
                   console.info("1")
                   console.info(res)
            if( res.data.message=="success"){//收藏过
                           document.getElementById("collect").innerText="已收藏";
                           document.getElementById("collect").style.color="black";
                           document.getElementById("collect").disabled="disabled";
            }else if( res.data.message=="error"){//未收藏
                document.getElementById("collect").innerText="点击收藏";
                document.getElementById("collect").disabled="";
            }
           
                  });

         }




         function isSigned(){//是否报名过

        var params =new URLSearchParams();   //  隐藏的请求参数对象
        params.append("u_id",u_id);
         params.append("p_id",p_id);
         params.append("br_id",br_id);
        axios.post("product/isSigned",params).then(res=>{       //post、put、delete请求这应该这样用

              
            if( res.data.message=="success"){//已经报名了
                websocket=getSocket();
                console.info("2")
            if(price.open==true){//正在拍卖
                
                document.getElementById("sign2").innerText="已预约";//正在拍买时的报名按钮值
                document.getElementById("sign2").disabled="disabled";
                document.getElementById("confirmPrice").innerText="出价";//拍卖时的确定出价按钮值
                document.getElementById("confirmPrice").disabled=""//可以点
                document.getElementById("add").disabled="";
            }
                else if(price.unopen==true){ //如果拍品未开始拍卖时
                 document.getElementById("sign1").innerHTML="已预约未开拍";//为拍卖的报名按钮值
                 document.getElementById("sign1").style.color="gray";
                 document.getElementById("sign1").disabled="disabled";//不能点，（取消预约）
                 }
            }else if( res.data.message=="error"){//未报名时
                   ;
            if(price.open==true){//正在拍卖
                
                document.getElementById("sign2").innerText="点击预约";//正在拍买时名按钮值
                document.getElementById("confirmPrice").innerText="请先预约";//拍卖时的确定出价按钮值
                document.getElementById("confirmPrice").disabled="disabled";
                document.getElementById("confirmPrice").style.color="gray";
                document.getElementById("add").disabled="disabled";//加价按钮显示不可点击
                document.getElementById("add").style.color="gray";
            }else if(price.unopen==true){//如果拍品未开始拍卖时
                //document.getElementById("sign1").innerHTML="点击预约提交保证金";
                
            }
            }
                

              
      });

}
//               生成订单
            function order(){
                var params =new URLSearchParams();   //  隐藏的请求参数对象
                params.append("u_id",u_id);
                 params.append("p_id",p_id);
                
                params.append("auction",record.records[0].price);
                params.append("deposit",price.deposit);
                 axios.post("order/addOrders",params).then(res=>{       //post、put、delete请求这应该这样用
                 console.info("订单生成")
                 window.location.href("www.baidu.com");//跳到订单详情
                  
            })}
    
           


        //过去websocket
            function getSocket(){
                   
                   //websocket
              var host = document.location.host; 
              var u_id =1; // 获得当前登录人员的userName 

              // alert(username)

        //判断当前浏览器是否支持WebSocket 

                  if ('WebSocket' in window) { 

                

                 //websocket = new WebSocket('ws://'+host+'/webSocket/'+u_id); 
                 websocket=new WebSocket( 'ws://localhost:8080/webSocket/'+u_id)

                    } else { 

                   alert('当前浏览器 Not support websocket') 

        } 



//连接发生错误的回调方法 

websocket.onerror = function() { 
　　alert("WebSocket连接发生错误")
};  

//连接成功建立的回调方法 
websocket.onopen = function() {
　　
} 

//接收到消息的回调方法 
websocket.onmessage = function(res) {
    var json=JSON.parse(res.data);
       
       price.current_price=json.price;
      
} 



//连接关闭的回调方法 
websocket.onclose = function() { 
alert("webSocket已关闭！")
} 



//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 
window.onbeforeunload = function() { 
closeWebSocket(); 
} 



//关闭WebSocket连接 
function closeWebSocket() { 
websocket.close(); 
} 
return websocket;

   }

// 获取页面参数
   function getParms() {
		var url = location.search; //获取url中"?"符后的字串
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for(var i = 0; i < strs.length; i ++) {
				theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
			}
		}
		return theRequest;
	}











		
	</script>






</body>
</html>






